<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            margin: auto;
            text-align: center;
        }

        #luncky {
            width: 600px;
            height: 200px;
            border: 2px solid red;
            font-size: 100px;
            line-height: 200px;
        }

        p {
            width: 100px;
            height: 50px;
            border: 1px solid black;
            line-height: 50px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>年会抽奖</h1>
        <div id="luncky"></div>
        <div class="btn">
            <button id="start">开始</button>
            <button id="pause" disabled>暂停</button>
        </div>
        <h2>中奖名单</h2>
        <h3>一等奖（1名）</h3>
        <p></p>
        <h3>二等奖（1名）</h3>
        <p></p>
        <h3>三等奖（1名）</h3>
        <p></p>
    </div>

    <script>
        let h1 = document.getElementsByTagName("h1")[0];
        let luncky = document.getElementById("luncky");
        let start = document.getElementById("start");
        let pause = document.getElementById("pause");
        let p = document.getElementsByTagName("p");

        // 参与抽奖的总名单
        let nameArr = ["张三", "李四", "王五", "赵六", "王麻子", "葫芦娃", "爷爷", "蛇精", "蝎子精", "唐僧", "悟空", "八戒", "沙僧", "白龙马"];

        // 内部名单
        let lunckyArr = ["张三", "爷爷", "唐僧"];

        function randomNumber(min, max) {
            return parseInt(Math.random() * (max - min + 1) + min);
        }
        let stop;
        let count = 3; //表示抽奖次数
        let flag = false; //表示暗门开关，true表示使用内部名单，false表示不使用

        // 点击标题，打开暗门开关
        h1.onclick = function () {
            flag = true;
        }

        // 点击开始
        start.onclick = function () {
            // 1.开始按钮禁止使用
            start.disabled = true;
            // 2.暂停按钮可以使用
            pause.disabled = false;
            // 3.间隔10毫秒从数组中随机抽取名字展示在页面红框中
            stop = setInterval(function () {
                let index = randomNumber(0, nameArr.length - 1); //随机获取的数值下标
                luncky.innerText = nameArr[index];
            }, 10);
        }

        // 点击暂停
        pause.onclick = function () {
            // 1.开始按钮可以使用
            start.disabled = false;
            // 2.暂停按钮禁止使用
            pause.disabled = true;
            // 3.停止间歇调用
            clearInterval(stop);
            if (flag) {
                // 4.把暗门数组中的名字放在对应的框中
                count--;
                p[count].innerText=lunckyArr[count];
                luncky.innerText=lunckyArr[count];
            } else {
                // 4.把中奖名字放到对应的框中
                p[--count].innerText = luncky.innerText;
                // 5.把中奖人从名单数组中删除，防止再次中奖
                let i = nameArr.indexOf(luncky.innerText); //中奖人的下标
                nameArr.splice(i, 1);
            }

            // 6.所有抽奖次数结束，按钮禁止使用
            if (count == 0) {
                start.disabled = true;
            }

        }
    </script>

</body>

</html>